import { useEffect, useState } from "react";
import { request } from "src/request";

export type BaseIngredient = {
  id?: string;
  name: string;
  unit?: string;
}

export function useBaseIngredients(): [BaseIngredient[], () => Promise<void>, boolean] {
  const [baseIngredients, setBaseIngredients] = useState<BaseIngredient[]>([]);
  const [loading, setLoading] = useState(false);

  const fetchBaseIngredients = async () => {
    setLoading(true);
    try {
      const response = await request.get('/base-ingredient');
      setBaseIngredients(response.data as BaseIngredient[]);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchBaseIngredients();
  }, []);

  return [baseIngredients, fetchBaseIngredients, loading];
}
